<template>
	<view class="lookHouse">
		<view class="lookHouse_title">
			<view class="title_search">
				<u-search placeholder="搜索商品名称" v-model="keyword" @search="search_cart"></u-search>
			</view>
			<view class="select_ku" @click="showkuSelect = true">
				<view>
					选择仓库：
					<view style="border-radius: 9.52rpx;display: inline-block;border: 1rpx solid #707070FF;">
						<text style="color: #2276BCFF;margin-left: 13.35rpx;">{{kuSelectType_value}}</text>
						<view style="display: inline-block;margin-left: 66.75rpx;margin-right: 13.35rpx;">
							<u-icon name="arrow-down" color="#707070FF" size="35"></u-icon>
						</view>
					</view>
				</view>
				<u-select
				title="选择仓库" 
				:mask-close-able="false" 
				:default-value="[kuSelectValue_default]" 
				v-model="showkuSelect" 
				:list="selectKulist" 
				@confirm="selectKuType">
				</u-select>
			</view>
			<view class="type_cart" @click="showCartSelect = true">
				<view>
					商品类别：
					<view style="border-radius: 9.52rpx;display: inline-block;border: 1rpx solid #707070FF;">
						<text style="color: #2276BCFF;margin-left: 13.35rpx;">{{selectCartType_value}}</text>
						<view style="display: inline-block;margin-left: 66.75rpx;margin-right: 13.35rpx;">
							<u-icon name="arrow-down" color="#707070FF" size="35"></u-icon>
						</view>
					</view>
				</view>
				<u-select
				title="商品类别" 
				:mask-close-able="false" 
				:default-value="[selectCartValue_default]" 
				v-model="showCartSelect" 
				:list="selectCartlist" 
				@confirm="selectCartType">
				</u-select>
			</view>
		</view>
		<view style="margin-top: 25vh;" v-show="isempty">
			<u-empty text="数据为空" mode="data"></u-empty>
		</view>
		<scroll-view scroll-y class="content_scroll" @scrolltolower="loaderList" v-if="!isempty">
			<yt-card head=" " v-for="(item,index) in cartList" :key="index" >
				<view class="content">
					<view class="content_img_box">
						<image class="content_img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf89db3-4d55-4b1f-a05e-c0a1170f8dce/981a7502-fefb-4ff6-bec6-7513cd717fa7.jpg"></image>
					</view>
					<view class="content_text">
						<view class="content_text_cartName">
							商品名称：<text style="color: #9E2424FF;">{{item.cart_name}}</text>
						</view>
						<view class="content_text_type">
							<view class="type_1">
								灶具进风：<text style="color: #9E2424FF;margin-right: 20rpx;">{{item.cook_utensils_jf}}</text>
								气源类别：<text style="color: #9E2424FF;">{{item.cook_utensils_qtype}}</text>
							</view>
							<view class="type_2">
								灶具出风：<text style="color: #9E2424FF;margin-right: 20rpx;">{{item.cook_utensils_cf}}</text>
								灶眼数量：<text style="color: #9E2424FF;">{{item.cook_utensils_eyes}}</text>
							</view>
						</view>
					</view>
				</view>
			</yt-card>
			<view class="gap_phone">
				<u-divider class="gaps" :margin-top="60" bg-color="#EEEEEEFF" border-color="#5f5f5f00">
					<u-loadmore v-show="isLoader" :status="status"/>
				</u-divider>
			</view>
		</scroll-view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import ytCard from '../../comment/yt-card.vue'
	export default {
		data() {
			return {
				keyword:'',
				status: 'loadmore',
				showCartSelect:false,
				cartList:[],
				selectCartlist:[ //主机电器、头部、水槽、配件、赠品
					{
						value: '1',
						label: '主机电器'
					},
					{
						value: '2',
						label: '头部'
					},
					{
						value: '3',
						label: '水槽'
					},
					{
						value: '4',
						label: '配件'
					},
					{
						value: '5',
						label: '赠品'
					}								
				],
				selectCartValue_default:'0',
				selectCartType_value:'主机电器',
				showkuSelect:false,
				selectKulist:[ //富安居、万泰隆、快环、澳华、吴圩、荣宝华、迷你厂、京东、总仓库。
					{
						value: '1',
						label: '富安居'
					},
					{
						value: '2',
						label: '万泰隆'
					},
					{
						value: '3',
						label: '快环'
					},
					{
						value: '4',
						label: '澳华'
					},
					{
						value: '5',
						label: '吴圩'
					},
					{
						value: '6',
						label: '荣宝华'
					},
					{
						value: '7',
						label: '迷你厂'
					},
					{
						value: '8',
						label: '京东'
					},
					{
						value: '9',
						label: '总仓库'
					}			
				],
				kuSelectValue_default:'8',
				kuSelectType_value:'总仓库',
				isLoader:false,//测试用,
				limit:6,//懒加载初始化数量
				isall:true,//是否全量查询
				isempty:true//库存是否为空
			};
		},
		onLoad() {
			uni.showLoading({
				title:"加载中。。。"
			})
			var Vue = this;
			uniCloud.callFunction({
				name: 'uni-id-cf_mobile',
				data: {
					action:"lookhouse",
					params:{
						cart_name_lookhouse:"",
						cart_depository_lookhouse:"",
						cart_type_lookhouse:"",
						num:Vue.limit,
						isall:Vue.isall
					}
				}
			}).then(({result}) => {
				if(result.code){
					this.$refs.uToast.show({
						title: '出错了！请重新登录。',
						type: 'error',
						position:"top"
					})
					uni.reLaunch({
						url:'../login/login'
					})
					return;
				}
				let { data } = result.data
				data.map((item)=>{
					if(item.cook_utensils_jf == ""){
						item.cook_utensils_jf = "无"
					}
					if(item.cook_utensils_qtype == ""){
						item.cook_utensils_qtype = "无"
					}
					if(item.cook_utensils_cf == ""){
						item.cook_utensils_cf = "无"
					}
					if(item.cook_utensils_eyes == ""){
						item.cook_utensils_eyes = "无"
					}
				})
				Vue.cartList = data
				if(result.Olength == 0){
					this.isempty = true
				}else{
					this.isempty = false
				}
				uni.hideLoading()
				console.log(result)
			}).catch(err => {
				uni.hideLoading()
				console.log(err)
			})
		},
		methods:{
			loaderList(e){
				this.isLoader = true
				this.status = 'loading';
				this.limit += 3;
				var Vue = this;
				uniCloud.callFunction({
					name: 'uni-id-cf_mobile',
					data: {
						action:"lookhouse",
						params:{
							cart_name_lookhouse:Vue.keyword,
							cart_depository_lookhouse:Vue.kuSelectType_value,
							cart_type_lookhouse:Vue.selectCartType_value,
							num:Vue.limit,
							isall:Vue.isall
						}
					}
				}).then(({result}) => {
					if(result.code){
						this.$refs.uToast.show({
							title: '出错了！请重新登录。',
							type: 'error',
							position:"top"
						})
						uni.reLaunch({
							url:'../login/login'
						})
						return;
					}
					let { data } = result.data
					data.map((item)=>{
						if(item.cook_utensils_jf == ""){
							item.cook_utensils_jf = "无"
						}
						if(item.cook_utensils_qtype == ""){
							item.cook_utensils_qtype = "无"
						}
						if(item.cook_utensils_cf == ""){
							item.cook_utensils_cf = "无"
						}
						if(item.cook_utensils_eyes == ""){
							item.cook_utensils_eyes = "无"
						}
					})
					Vue.cartList = data
					if(Vue.limit >= result.Olength){
						Vue.limit = result.Olength
						this.status = 'nomore';
						this.isLoader = true
					}else{
						this.status = 'loading';
						this.isLoader = false
					}
					if(result.Olength == 0){
						this.isempty = true
					}else{
						this.isempty = false
					}
					console.log(result)
				}).catch(err => {
					this.status = 'loading';
					this.isLoader = false
					console.log(err)
				})
			},
			search_cart(e){
				var Vue = this;
				this.limit = 6
				this.isall = false
				uni.showLoading({
					title:"加载中。。。"
				})
				uniCloud.callFunction({
					name: 'uni-id-cf_mobile',
					data: {
						action:"lookhouse",
						params:{
							cart_name_lookhouse:Vue.keyword,
							cart_depository_lookhouse:Vue.kuSelectType_value,
							cart_type_lookhouse:Vue.selectCartType_value,
							num:Vue.limit,
							isall:Vue.isall
						}
					}
				}).then(({result}) => {
					if(result.code){
						this.$refs.uToast.show({
							title: '出错了！请重新登录。',
							type: 'error',
							position:"top"
						})
						uni.reLaunch({
							url:'../login/login'
						})
						return;
					}
					let { data } = result.data
					data.map((item)=>{
						if(item.cook_utensils_jf == ""){
							item.cook_utensils_jf = "无"
						}
						if(item.cook_utensils_qtype == ""){
							item.cook_utensils_qtype = "无"
						}
						if(item.cook_utensils_cf == ""){
							item.cook_utensils_cf = "无"
						}
						if(item.cook_utensils_eyes == ""){
							item.cook_utensils_eyes = "无"
						}
					})
					Vue.cartList = data
					if(result.Olength == 0){
						this.isempty = true
					}else{
						this.isempty = false
					}
					uni.hideLoading()
					console.log(result)
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			selectCartType(e){
				this.selectCartValue_default = e[0].value - 1
				this.selectCartType_value = e[0].label
				this.isall = false
				this.limit = 6
				uni.showLoading({
					title:"加载中。。。"
				})
				var Vue = this;
				uniCloud.callFunction({
					name: 'uni-id-cf_mobile',
					data: {
						action:"lookhouse",
						params:{
							cart_name_lookhouse:Vue.keyword,
							cart_depository_lookhouse:Vue.kuSelectType_value,
							cart_type_lookhouse:Vue.selectCartType_value,
							num:Vue.limit,
							isall:Vue.isall
						}
					}
				}).then(({result}) => {
					if(result.code){
						this.$refs.uToast.show({
							title: '出错了！请重新登录。',
							type: 'error',
							position:"top"
						})
						uni.reLaunch({
							url:'../login/login'
						})
						return;
					}
					let { data } = result.data
					data.map((item)=>{
						if(item.cook_utensils_jf == ""){
							item.cook_utensils_jf = "无"
						}
						if(item.cook_utensils_qtype == ""){
							item.cook_utensils_qtype = "无"
						}
						if(item.cook_utensils_cf == ""){
							item.cook_utensils_cf = "无"
						}
						if(item.cook_utensils_eyes == ""){
							item.cook_utensils_eyes = "无"
						}
					})
					Vue.cartList = data
					if(result.Olength == 0){
						this.isempty = true
					}else{
						this.isempty = false
					}
					uni.hideLoading()
					console.log(result)
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			selectKuType(e){
				this.kuSelectValue_default = e[0].value - 1
				this.kuSelectType_value = e[0].label
				this.limit = 6
				uni.showLoading({
					title:"加载中。。。"
				})
				var Vue = this;
				uniCloud.callFunction({
					name: 'uni-id-cf_mobile',
					data: {
						action:"lookhouse",
						params:{
							cart_name_lookhouse:Vue.keyword,
							cart_depository_lookhouse:Vue.kuSelectType_value,
							cart_type_lookhouse:Vue.selectCartType_value,
							num:Vue.limit,
							isall:false
						}
					}
				}).then(({result}) => {
					if(result.code){
						this.$refs.uToast.show({
							title: '出错了！请重新登录。',
							type: 'error',
							position:"top"
						})
						uni.reLaunch({
							url:'../login/login'
						})
						return;
					}
					let { data } = result.data
					data.map((item)=>{
						if(item.cook_utensils_jf == ""){
							item.cook_utensils_jf = "无"
						}
						if(item.cook_utensils_qtype == ""){
							item.cook_utensils_qtype = "无"
						}
						if(item.cook_utensils_cf == ""){
							item.cook_utensils_cf = "无"
						}
						if(item.cook_utensils_eyes == ""){
							item.cook_utensils_eyes = "无"
						}
					})
					Vue.cartList = data
					if(result.Olength == 0){
						this.isempty = true
					}else{
						this.isempty = false
					}
					uni.hideLoading()
					console.log(result)
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			}
		},
		components:{
			ytCard
		}
	}
</script>

<style lang="scss">
.lookHouse{
	position: absolute;
	width: 100%;
	min-height: 1480rpx;
	background-color: #EEEEEEFF;
	.content_scroll{
		position: absolute;
		display: block;
		height: 79vh;
		.gap_phone{
			height: 300rpx;
			width: 100%;
		}
	}
	.lookHouse_title{
		padding: 32.04rpx;
		background-color: #fff;
		width: 100%;
		border-bottom: 2.67rpx solid #7070703D;
		.title_search{
			padding: 0 0 26.7rpx 0;
		}
		.select_ku{
			padding: 26.7rpx 0;
			font-size: 30rpx;
		}
		.type_cart{
			padding: 26.7rpx 0 0 0;
			font-size: 30rpx;
		}
	}
	.content{
		display: inline-flex;
		.content_img_box{
			.content_img{
				border: 2.67rpx solid #7070703D;
				border-radius: 40.05rpx;
				width: 150rpx;
				height: 150rpx;
				margin-right: 20rpx;
			}
		}
		.content_text{
			font-size: 20rpx;
			.content_text_cartName{
				margin-bottom: 25rpx;
			}
			.content_text_type{
				
				.type_1{
					margin-bottom: 25rpx;
				}
				.type_2{
					margin-bottom: 25rpx;
				}
			}
		}
	}
}

</style>